<template>
	<n-layout-sider
		class="h-full bg-bg-1"
		:width="241"
		:collapsed-width="61"
		collapse-mode="width"
		:collapsed="!layoutStore.menuOpen">
		<n-layout-header
			class="h-15 pr-[21px] flex justify-center items-center gap-2 bg-gradient-header border-b border-b-border-1 bg-clip-padding"
			:class="layoutStore.menuOpen ? 'pl-[20px]' : 'px-5'">
			<app-menu-icon @click="onMenuToggle"></app-menu-icon>
			<app-tabs v-if="layoutStore.menuOpen" small class="flex-1" />
		</n-layout-header>
		<n-layout-content
			position="absolute"
			class="bg-bg-1 border-r border-border-1"
			:native-scrollbar="false"
			style="top: 60px; bottom: 0; overflow-x: hidden">
			<div class="py-5" :class="layoutStore.menuOpen ? 'px-5' : 'px-[10px]'">
				<app-search :expanded="layoutStore.menuOpen" />
				<app-menu class="mt-[6px]" />
			</div>
		</n-layout-content>
	</n-layout-sider>
</template>

<script lang="ts" setup>
import { NLayoutHeader, NLayoutSider, NLayoutContent } from 'naive-ui'
import AppMenuIcon from '@/components/app/app-menu-icon/index.vue'
import AppSearch from '@/components/app/app-search/index.vue'
import AppMenu from '@/components/app/app-menu/index.vue'
import AppTabs from '@/components/app/app-tabs/index.vue'
import { useLayoutStore } from '@/store'
import { useElementSize } from '@vueuse/core'
import { watch } from 'vue'

const layoutStore = useLayoutStore()

const { width } = useElementSize(document.body)

const onMenuToggle = () => {
	layoutStore.setMenuOpen(!layoutStore.menuOpen)
}

watch(width, (val) => {
	if (val < 1280) {
		layoutStore.setMenuOpen(false)
	} else {
		layoutStore.setMenuOpen(true)
	}
})
</script>
